<template>
  <div class="main">
    <div  class="record">
      <div class="title">
        <el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
          <a href="javascript:void (0)"><i class="el-icon-back"/></a>
        </el-tooltip>
        收藏记录
      </div>
      <el-table :data="tableData" stripe max-height="600px" style="width: 100%">
        <el-table-column prop="name" label="文档名称" min-width="220" show-overflow-tooltip>
          <template slot-scope="{row}">
            <a class="href" href="javascript:void (0)">{{row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="文档类型" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{status(row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="文档价格" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="date" label="收藏时间"  show-overflow-tooltip min-width="150"></el-table-column>


      </el-table>

      <div class="bottom-box">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        tableData: [
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:2,
            date: '2024-9-12 15:00:08',
          },
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:1,
            date: '2024-9-12 15:00:08',
          },
          {
            orderID: 'YSD7015012580000',
            name: '商务标书范本（3）',
            header: '安徽标书标权有限责任公司',
            money: '650',
            status:3,
            date: '2024-9-12 15:00:08',
          },


        ]
      }
    },
    methods:{
      status(item){
        switch (item){
          case 1:{
            return '免费文档'
          }
          case 2:{
            return 'VIP文档'
          }
          case 3:{
            return '其他文档'
          }

        }
      },
    }
  }
</script>

<style scoped lang="scss">
.main{
  padding: 3%;
  box-sizing: border-box;
  .href{
    color:#333 ;
  }
  .href:hover{
    color:#ee0a24 ;
  }
  .record{
    width: 100%;
    min-height: 100px;
    .title{
      width: 100%;
      font-size: 16px;
      font-family: 'OPPOB', sans-serif;
      height: 60px;
      display: flex;
      align-items: center;
      a{
        font-size: 26px;
        font-weight: 800;
        margin-right: 10px;
      }
    }
    .bottom-box{
      width: 100%;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}

</style>